// ------------------------ 切换两个盒子 ----------------------
$('.login a').on('click', function () {
  $('.register').show().siblings('.login').hide();
})

$('.register a').on('click', function () {
  $('.register').hide().prev().show();
})


// ------------------------   注册功能   ----------------------
$('.register form').on('submit', function (e) {
  e.preventDefault();
  // 收集数据(修改input的name数组值 =====  接口要求的参数名)
  let data = $(this).serializeArray();
  // console.log(data);
  // Ajax提交
  $.ajax({
    type: 'POST',
    data: data,
    url: '/api/reguser',
    // 响应状态码是 2xx 或 3xx 的时候触发 success
    success: function (res) {
      // console.log(res);
      // 只处理成功的情况，失败的情况，后续统一处理
      if (res.status === 0) {
        // 1. 注册成功，提示
        // alert(res.message);
        layer.msg(res.message);
        // 2. 清空输入框
        $('.layui-input').val(''); // $('.register form')[0].reset();
        // 3. 切换到登录的盒子
        $('.register').hide();
      }
    }
  });
});


// ------------------------   表单验证   ----------------------
// 用户名长度 2~10位
// 密码长度 6~12
// 两次密码必须一致

// layui2.5.6以前，html中需要加载 layui.all.js     从 layui2.6.xx 开始，html中加载 layui.js
// layui 的模块，一个模块，就是一个JS文件，一个模块负责一系列相关的功能

// 比如 form 模块，处理的肯定和表单有关
// 比如 laypage 模块，处理的是分页
// .......

// 使用layui的模块之前，必须先加载模块
// 加载语法  let xx = layui.模块名;    ----  加载得到一个js对象，对象中封装了很多方法

// 加载表单模块
let form = layui.form;
// console.log(form);
// 写下面的方法，目的是自定义验证规则
form.verify({
  // 键: 值
  // 键(规则名称): 值(验证方法)  ===>  规则名称: []      规则名称: function
  ///////////////////  值是数组 //////////////////////
  // 规则名称: ['正则表达式', '验证不通过时的提示']
  user: [/^\w{2,10}$/, '用户名长度必须是2~10位~~~'], // {2,10} 不是 {2, 10}
  pwd: [/^\w{6,12}$/, '密码长度必须是6~12位'],

  ///////////////////  值是函数 //////////////////////
  same: function (val) {
    // 形参 val 表示的是使用该规则的输入框的值
    // 案例中，确认密码框使用了这个验证规则，所以 形参 val 表示 我们输入的确认密码
    let pwd = $('.pwd').val();
    if (pwd !== val) {
      return '两次密码不一致，注意'; // '验证不通过时的提示';
    }
  }
});



// ------------------------   登录功能   ----------------------
$('.login form').on('submit', function (e) {
  e.preventDefault();
  let data = $(this).serialize(); // 使用serialize的时候，必须要检查 input 的name属性
  $.ajax({
    type: 'POST',
    url: '/api/login',
    data: data,
    success: function (res) {
      // 只处理成功的情况
      if (res.status === 0) {
        // 登录成功，存储token
        localStorage.setItem('token', res.token);
        // 提示
        // alert(res.message);
        // layer.msg('提示信息', {配置信息}, function () {弹出隐藏之后做什么});
        layer.msg(res.message, { time: 1500 }, function () {
          // 跳转到index.html（相对路径，参照物是使用js的html文件；）
          location.href = './index.html';
        });
      }
    }
  });
})